package myJs.references

import myJs.myPkg._
import myJs.tool.Pojo._
import myJs.tool.Tool
import shared.Pojo.{CellData, GetFileData}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.web.html._

import scala.scalajs.js.Dynamic.{global => g}
import upickle.default._

import scala.concurrent.ExecutionContext.Implicits.global
import myJs.Implicits._
import myJs.cps.{BootstrapTableCp, Style}
import myJs.cps.BootstrapTableCp._
import slinky.core.facade.Hooks.{useEffect, useState}

import scala.collection.immutable.SeqMap

/**
 * Created by yz on 3/11/2020
 */
@react object Cp {

  type Props = Unit

  val component = FunctionalComponent[Props] { props =>

    val (datas, setDatas) = useState(List.empty[Map[String, CellData]])
    val (columns, setColumns) = useState(List.empty[Column])

    object FTool {

      def getTableRs = {
        val options = Tool.layerOptions.copy(shade = List("0.1", "#fff"))
        val index = layer.load(1, options)
        val url = g.jsRoutes.controllers.ToolController.getXlsxFileData().url.toString
        MyFetch.getRnStr(url = s"${url}?fileName=附件2.xlsx").map { str =>
          layer.close(index)
          read[GetFileData.Response](str)
        }
      }

      def refreshTableB = () => {
        getTableRs.map { response =>
          val curDatas = response.array
          val map = response.map.filter { case (k, v) =>
            v != "URL"
          }
          val basicColumns = map.map { case (k, v) =>
            val searchKind = v match {
              case "start" | "end" => NumericSearch
              case _ => TextSearch
            }
            val title = v match {
              case _ => v
            }
            val fmt = FTool.tbFmt(v)
            val comVF = FTool.comVFmt(v)
            val optionMap = searchKind match {
              case CheckboxSearch => curDatas.map { dict =>
                dict(k).value.str
              }.distinct.optionMap
              case _ => SeqMap[String, String]()
            }
            Column(field = k, title = title, operable = false, searchKind = searchKind, formatter = fmt, comVF = comVF,
              optionMap = optionMap)
          }.toList
          setColumns(basicColumns)
          val datas = curDatas
          setDatas(datas)
        }
      }

      def tbFmt(fileTitle: String) = (v: CellData, row: Map[String, CellData]) => {
        fileTitle match {
          case "References" =>
            val hfStr = row("c3").value.str
            val hfs = hfStr.split(";").toList
            val vStr = v.value.str
            val vs = vStr.split(";").toList
            span(
              vs.zip(hfs).zipWithIndex.map { case ((v, hf), curI) =>
                span(key := s"${curI}",
                  a(
                    target := "_blank",
                    href := hf
                  )(v),
                  if (curI < vs.size - 1) {
                    span(";")
                  } else null
                )
              },
            )()
          case "Species"=>
            val vStr=v.value.str
            val vs=vStr.split(",").toList
            span(style:=Style(whiteSpace="nowrap"),
              vs.zipWithIndex.map { case (v, curI) =>
                span(key := s"${curI}",
                  v,
                  if (curI < vs.size - 1) {
                    br()
                  } else null
                )
              },
            )()
          case _ =>
            span(v.value.myStr)()
        }
      }

      def comVFmt(fileTitle: String) = (v: CellData, row: Map[String, CellData]) => {
        fileTitle match {
          case _ => v.toString
        }
      }

    }

    useEffect(() => {
      FTool.refreshTableB()
    }, List()
    )

    div(
      BootstrapTableCp(columns = columns, datas = datas, pageList = List(10, 25, 50), pageSize = 10,
        selectColumnEnabled = false, pagination = false,
      ),
    )


  }

}



